<template>
  <div>
    <!-- 模板自动解包,所以不需要使用.vlaue获取值 -->
    <p @click="addCount">count:{{ count }}</p>

    <!-- 渲染对象数据类型 -->
    <p @click="editname1">{{ userobj.name }} --{{ userobj.age }}</p>
    <p @click="editname2">
      {{ userobj.brother.brothername }}-{{ userobj.brother.age }}
    </p>
  </div>
</template>

<script setup>
import { ref, nextTick, reactive } from "vue";
// dom 更新时机
// 说白了就是当数据更新时, 页面中的dom 是否是最新的dom

const count = ref(0);
const addCount = () => {
  count.value++;
  //console.log(count);
  nextTick(() => {
    console.log(document.querySelector("p").innerHTML);
  });
};

// 数据的深层响应
const userobj = reactive({
  name: "诸葛亮",
  age: 54,
  brother: {
    brothername: "诸葛瑾",
    age: 60,
  },
});

const editname1 = () => {
  userobj.name = "孔明先生";
};
const editname2 = () => {
  userobj.brother.brothername = "卧龙的哥哥";
};
</script>
<style scoped>
</style>